import React, { useEffect, useState } from 'react'
import ButtomBar from '../../sjc/components/ButtomBar'
import './index.css'
import { Button } from 'antd-mobile'
import { Stepper } from 'antd-mobile'
import {useNavigate } from 'react-router-dom'
import axios from 'axios'
export default function Gouwu() {
    let id = sessionStorage.getItem('id')
    const Navigate = useNavigate()
    let [list,setlist] = useState([])
    let getgouwulist = ()=>{
        axios.get(`yzk/gouwulist?id=${id}`).then(res=>{
            setlist(res.data.goodcar)
        })
    }
    let jiesuan=(item)=>{
        let arr = []
        arr.push(item)
        sessionStorage.setItem('jiesuan',JSON.stringify(arr))
        Navigate('/jiesuan')
    }
    let bujin=(item,e)=>{
        axios.post(`yzk/gouwulist?id=${item._id}&count=${e}`).then(res=>{
            if(res.data.code===200){
                getgouwulist()
            }
        })
    }
    useEffect(()=>{
        getgouwulist()
    },[])
  return (  
    <div>
        {
            id ? 
            <div className='yzkdiv5'>
                <div className='yzkdiv3'>
                    <h1 className='yzkh1'>购物车</h1>
                </div>
                {
                    list.map(item=>{
                        return <div className='yzkdiv4' key={item._id}>
                           
                            <div style={{float:'left'}}>
                                <p>{item.pname}</p>
                                <img src={item.img} alt="" className='yzkimg2' />
                            </div>
                            <div className='yzkdiv6'>
                                <p className=''>{item.name}</p>
                                <p className=''>{item.color}{item.size}</p>
                                <p className=''>￥{item.price}</p>
                            </div>
                            <div className='yzkdiv6'>
                                <Stepper min={0} value={item.num} onChange={(e)=>{
                                    bujin(item,e)
                                }}/>
                            </div>
                            <div className='yzkdiv7'>
                                <p className='yzkp1' style={{float:'left'}}>合计￥{item.price*item.num}</p> <Button block shape='rounded' color='primary' onClick={()=>{
                                    jiesuan(item)
                                }}> 结算</Button>
                            </div>
                        </div>
                    })
                }
            </div> 
            :
             <div className='yzkdiv1'>
                <h1 className='yzkh1'>欢迎来到OMINI</h1>
                <div className='yzkdiv2'>
                    <h1 className='yzkh1'>想看更多?请立即登录</h1>
                
                    <Button block shape='rounded' color='primary' className='yzkbut1' onClick={()=>{
                        Navigate('/')
                    }}>
                        请先登录
                    </Button>
                </div>
            </div>
        }
        <ButtomBar></ButtomBar>
    </div>
  )
}
